<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8" />

		<title>Swixs: Dashboard</title>
		<style type="text/css">
			*
			{
				padding: 0;
				margin: 0;
			}
			:focus
			{
				outline: 0;
			}
			img
			{
				border: none;
			}
			body
			{
				font: 13px "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
				background: #2C3536 url('images/bg.png') repeat-x;
				color: #555;
			}
			h1, h2, h3, h4, h5, h6, address {
				font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
			}
			strong, em, b, i {
				font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
			}
			a {
				color: #9b9b9b;
				outline: 0;
				text-decoration: none;
			}
			h2
			{
				color: #FFF;
				background: #0080E3 url('images/grad.png') repeat-x;
				margin: -30px -30px 0 -30px;
				padding: 20px;
				margin-bottom: 27px;
				font: 23px Georgia, Times, "Times New Roman", serif;
				font-weight: normal;
			}
			a
			{
				color: #004ba2;
				text-decoration: none;
			}
			a:hover
			{
				color: #555;
			}
			#container
			{
				width: 990px;
				margin: 50px auto 0 auto;
				background: #151E1F;
			}
			input, textarea
			{
				font: 13px "Lucida Grande", "Lucida Sans", Verdana, Arial, Helvetica, sans-serif;
			}
			input.text, textarea
			{
				background: #f5f5f5;
				border: 1px solid #D0D0D0;
				color: #666;
				padding: 12px;
				margin-bottom: 20px;
			}
			textarea
			{
				width: 248px;
			}
			.notice 
			 {  
			    background-color: #fff9d7;  
				width: 40%;
			    border: 1px solid #e2c822;  
				float: left;
			    color: #555;  
			    padding: 10px;  
				margin: 20px;
			    font-size: 13px;  
			 }
			 .message
			 {  
                background-color: #f7f7f7;
				width: 40%;
                border: 1px solid #cccccc;
				float: left;
			    color: #333;  
			    padding: 10px;  
				margin: 20px;
			    font-size: 13px;   
			 } 
 			h3
			{
				color: #0063C7;
				font: 23px Georgia, Times, "Times New Roman", serif;
			}
			 .wrap
			 {
				background: #FFF;
				font-size: 11px;
				border: 1px solid #D1D1D1;
				width: 87%;
				margin: 5px 0 20px 0;
				padding: 10px;
			 }
			 .wrap p
			 {
				border-bottom: 1px solid #CCC;
				padding: 10px;
				text-align: right;
			 }
			 .wrap p:last-child
			 {
				border: 0;
				padding-bottom: 0;
			 }
			 .wrap label
			 {
				color: #0080E3;
				font-weight: 700;
				float: left;
			 }
			 .clearing
			 {
				clear: both;
			 }
			 .logo
			 {
				margin: 40px 0 0 40px;
			 }
			 .left
			 {
				float: left;
			 }
			 .col
			 {
				float: left;
				width: 50%;
			 }
			 #main
			 {
				float: left;
				width: 630px;
				background: #FFF;
				padding: 30px;
			 }
			 #sidebar
			 {
				float: right;
				width: 300px;
				font: italic 14px Georgia, 'Nimbus Roman No9 L', norasi, rekha, serif;
				background: #151E1F;
			 }
			 #sidebar ul.nav
			 {
				list-style: none;
				font-size: 16px;
				border-bottom: 1px solid #2a3d3f;
				width: 100%;
				background: #151E1F;
			 }
			 #sidebar ul.nav li:first-child
			 {
				border-top: 0;
			 }
			 #sidebar ul.nav li.nav
			 {
			 	border-bottom: 1px solid #0d1213;
				border-top: 1px solid #2a3d3f;
				color: #AAA;
				padding: 30px;
				display: block;
			 }
			 ul.nav li.sub
			 {
				border: 0;
				padding: 30px;
				display: block;
				background: #213032;
			 }
			 li.sub ul
			 {
				list-style-type: none;
			 }
			 li.sub ul li
			 {
				font: 13px "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
				margin-bottom: 4px;
			 }
			 #sidebar ul.nav li a
			 {
                color: #AAA;
                text-decoration: none;
			 }
			 #sidebar ul.nav li a:hover
			 {
				color: #FFF;
			 }
			 div.row
			 {
				display: block;
			 }
 			.button
			{
				border: 1px solid #558aa9;
				padding: 5px;
				background: #d8dfea;
				font-weight: 700;
				color: #666;
			}
		</style>
		<script type="text/javascript" src="js/jquery.js">	</script>
		<script type="text/javascript" charset="utf-8">
			$(function() {
				
				/*$('li.nav a').click(function () {
					$('.sub').toggle();
					return false;
				});*/
			})
		</script>

	</head>
	<body>
		<img src="images/logo.png" class="logo" alt="Swixs Matterhorn" />
		<div id="container">
		<div id="main">
		<h2>Dashboard &rarr; Summary</h2>
		<div class="col">
			<h3>Notepad</h3>
			<div class="wrap">
				<form action="#" method="post">
					<textarea rows="10" cols="10">Enter notes to Yourself or other Administrators</textarea>
					<input class="button" type="submit" name="submit" value="Update" />
				</form>
			</div>
			<h3>Tasks</h3>
			<div class="wrap">
				<p><label>Offline Mode</label>Toggle</p>
				<p><label>Mass Logout</label>Toggle</p>
				<p><label>Reload Statistics</label>Toggle</p>
			</div>
		</div>
		<div class="col">
			<h3>Main</h3>
			<div class="wrap">
				<p><label>Version</label>Matterhorn Release Candidate</p>
				<p><label>Platform</label>PHP 5.2.6 WINNT i586</p>
				<p><label>Modules</label>Core, News, Bugs</p>
				<p><label>Status</label>Operational</p>
			</div>
		</div>
		<div class="clearing"></div>
		</div>
		<div id="sidebar">
			<ul class="nav">
				<li class="nav"><a href="#">Configuration &amp; Settings</a></li>
				<li class="sub">
					<ul>
						<li><a href="#">Cookies &amp; URL Settings</a></li>
						<li><a href="#">General Settings</a></li>
						<li><a href="#">Board Configuration</a></li>
						<li><a href="#">Security Configuration</a></li>
					</ul>
				</li>
				<li class="nav"><a href="#">Board Managment</a></li>
				<li class="sub" style="display: none;">
					<ul>
						<li><a href="#">Cookies &amp; URL Settings</a></li>
						<li><a href="#">General Settings</a></li>
						<li><a href="#">Board Configuration</a></li>
						<li><a href="#">Security Configuration</a></li>
					</ul>
				</li>
				<li class="nav"><a href="#">Styles</a></li>
				<li class="nav"><a href="#">Performance &amp; Features</a></li>
				<li class="nav"><span style="color: #087400;">20</span> Pending comments</li>
			</ul>
		</div>
		<div class="clearing"></div>
		</div>
	</body>
</html>